<template>
  <div>
    <div slot="header" class="clearfix1" v-html="this.Data.title"></div>
    <div v-html="this.Data.createdTime" style="text-align: center"></div>

    <div v-html="this.Data.author" style="text-align: center"></div>
    <div class="contextContainer">
      <el-card class="box-card3" v-html="this.Data.context"> </el-card>
      <div class="abb">
        <div class="functionBtn">
          <div class="commentsBtn">
            <el-badge class="item">
              <el-button
                size="small"
                @click="saySomething"
                icon="el-icon-chat-dot-round"
                >评论</el-button
              >
            </el-badge>
          </div>

          <div class="likesBtn">
            <el-badge :value="this.likesValue" class="item">
              <el-button
                size="small"
                @click="likes"
                icon="el-icon-thumb"
                v-if="addlikes"
                >点赞</el-button
              >
              <el-button
                size="small"
                @click="cancle"
                icon="el-icon-circle-close"
                v-show="theId"
                id="cancle"
                >取消</el-button
              >
            </el-badge>
          </div>
          <div class="numReadingsBtn">
            <el-badge :value="this.Data.numReadings" class="item">
              <el-button size="small" icon="el-icon-more-outline"
                >阅读数量</el-button
              >
            </el-badge>
          </div>
        </div>

        <div class="allComments">
          <el-card>
            全部评论
            <div v-for="item in commentaa" :key="item.id" class="text item">
              <el-card> {{ item.username }}：{{ item.commentText }} </el-card>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <el-dialog title="评论" :visible.sync="comments">
      <el-form>
        <el-form-item label="" label-width="120px">
          <el-input
            autocomplete="off"
            v-model="formData.commentText"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { getId, addLikes, cancleLikes } from "../api/articles";
import { getarictlesList, addarticlecomments } from "../api/articlecomments";
import { addUser } from "../api/comments";
import { addUserComments } from "../api/usercomments";
export default {
  inject:["reload"],
  data() {
    return {
      Data: "",
      Data2: [],
      Data3: [],
      id: "",
      textarea: "",
      likesValue: 0,
      commentaa: [],
      numReadingsValue: 0,
      dialogFormVisible: false,
      comments: false,
      allComments: {
        one: "123",
        two: "123",
        three: "123",
        four: "123",
        five: "123",
      },
      formData: {
        ArticleId: 0,
        userid: 0,
        CommentId: "",
        commentText: "",
      },
      likesUser: [],
      theId: false,
      addlikes: true,
    };
  },
  methods: {
    //点赞数量
    likes() {
      if (this.uId) {
        this.theId = true;
        this.addlikes = false;
        addLikes(this.id)
          .then(({ data }) => {
            var res = data.data;
            this.Data2 = res;
            this.likesValue = res.likes;
            this.$message.success("点赞成功！");
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        console.log(this.uId);
        this.$message.error("请先登录！");
      }
    },
    cancle() {
      this.addlikes = true;
      this.theId = false;
      cancleLikes(this.id)
        .then(({ data }) => {
          var res = data.data;
          this.Data3 = res;
          this.likesValue = res.likes;
          this.$message.success("取消成功！");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //阅读数量
    numReadings() {
      this.numReadingsValue = this.numReadingsValue + 1;
    },
    //弹出模态框
    saySomething() {
      this.comments = true;
      this.formData.userid = parseInt(this.showid);
      this.formData.ArticleId = parseInt(this.id);
    },
    //隐藏模态框
    handleCancel() {
      this.comments = false;
    },
    //发布评论
    async handleSave() {
      this.comments = false;
      if(this.uId){
      console.log(this.formData.commentText);
      await addUser(this.formData).then((res) => {
        console.log(res);
        console.log(res.data.data.id);
        this.formData.CommentId = res.data.data.id;
      });
      console.log(this.formData);
      addUserComments(this.formData).then((res) => {
        console.log(res);
      });
      addarticlecomments(this.formData).then((res) => {
        console.log(res);
      });
      getarictlesList(this.id).then((res) => {
      console.log(res);
      this.commentaa = res.data.data.data;
      console.log(this.commentaa);
      this.reload();
    });

      // this.reload();
      }else{
        this.$message.error("请先登录！");
      }

    },
    //查看所有评论
    // selectAllCommnets() {
    //   this.dialogFormVisible = true;
    // },
    //弹出回复框
    reply() {
      //   this.dialogFormVisible = true;
    },
  },
  mounted() {
    console.log(this.id);
    getarictlesList(this.id).then((res) => {
      console.log(res);
      this.commentaa = res.data.data.data;
    });
    getId(this.id)
      .then(({ data }) => {
        var res = data;
        console.log(res.data);
        this.Data = res.data;
        console.log(this.Data);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  created() {
    this.id = this.$route.query.id;
    console.log(this.id);
  },
  computed: {
    showid() {
      return Cookies.get("id");
    },
    uId() {
      return Cookies.get("id");
    },
    uName() {
      return Cookies.get("username");
    },
  },
};
</script>

<style>
.abb {
  /* line-height: 100px;
height: 100px;
margin-top: -100px; */
  padding-top: 20px;
}
body {
  background-color: #eaeaef;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card3 {
  width: 1200px;
  max-height: max-content;
  background-color: white;
  margin-top: 100px;
  padding: 0px;
  margin-left: 100px;
}
.contextContainer {
  width: 1200px;
  height: 700px;
  margin: 0 auto;
  margin-top: -90px;
  margin-left: 0px;
}

.clearfix1 {
  width: 1200px;
  height: 100px;
  margin: 0 auto;
  background-color: white;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  margin-top: 30px;
  margin-left: 100px;
}

.functionBtn {
  width: 400px;
  height: 80px;
  margin: 0 auto;
  /* margin-top: -70px; */
  float: inline-end;
}
.BtnMargin {
  margin-left: 10px;
}
.commentsBtn {
  width: 56px;
  height: 32px;
  float: left;
}
.likesBtn {
  width: 56px;
  height: 32px;
  float: left;
  margin-left: 100px;
}
.numReadingsBtn {
  width: 56px;
  height: 32px;
  float: left;
  margin-left: 100px;
}
.createdTime {
  line-height: -20px;
}
.allComments {
  width: 1200px;
  height: 500px;
  margin-left: 100px;
}
</style>